<template>
  <div class="c-buddy" @click="emits('customClick', buddy)">
    <div class="c-buddy__rwos">
      <Images :src="buddy.user?.avatar" v-if="!isIcon" class="c-buddy__avatar" />
      <Icon v-bind="icons" v-else class="buddy__icon" />
    </div>
    <span v-text="buddy.user?.nickName ?? buddy.user?.userName"></span>
  </div>
</template>

<script setup>
import Images from '@/components/Images/Index.vue';
import Icon from '@/components/SVG/Index.vue'

const props = defineProps({
  buddy: {
    type: Object,
    default: {}
  },
  isIcon: {
    type: Boolean,
    default: false,
  },
  icons: {
    type: Object,
    default: {}
  }
})
const emits = defineEmits(["customClick"])

</script>

<style lang="scss" scoped>
.c-buddy {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;

  &__avatar {
    width: 36px;
    height: 36px;
  }

  // &__rows {}

  .buddy__icon {
    // width: 20px;
    padding: 4px 4px;
    border-radius: 2px;
    background-color: red;
  }
}
</style>